import React, { useRef, useEffect } from 'react';
import { Button, Form, Input, Select, message } from 'antd';
import { useLocation, useNavigate } from 'react-router-dom';
import axios from 'axios';  // 导入 axios
import { log } from 'console';

export default function EditDetails() {
    const location = useLocation();
    const { hospital } = location.state || {};  // 获取从第一个页面传递过来的数据
    const formRef = useRef(null);
    const [messageApi, contextHolder] = message.useMessage();
    const navigate = useNavigate();

    // 在页面加载时，将传递的数据填充到表单
    useEffect(() => {
        if (hospital) {
            formRef.current.setFieldsValue(hospital); // 设置表单的初始值
            // console.log(hospital);

        }
    }, [hospital]);

    // 提交表单
    const onFinish = async (values) => {
        try {
            // 将 _id 加入到表单提交的数据中
            values._id = hospital._id;  // hospital 需要包含 _id
            //  console.log('Success:', values);


            let { data } = await axios.post('http://localhost:3005/yjx/edit', values);
            // console.log(data);

            if (data.code === 203) {
                messageApi.open({
                    type: 'success',
                    content: 'Successfully updated!',
                });
                // 跳转到医院详情页面
                navigate('/HospitalDetails');

            }
        } catch (error) {
            messageApi.open({
                type: 'error',
                content: 'Failed to update hospital information!',
            });
        }
    };

    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };

    const qing = () => {
        formRef.current.resetFields();  // 清空表单
    };

    return (
        <div id='y-edit'>
            <div className="header">
                {contextHolder}
                <span>编辑医院信息</span>
                <span style={{ fontSize: '12px', color: '#a0a0a0' }}>
                    <span style={{ color: '#ff706f' }}>*</span>为必填项
                </span>
            </div>
            <div className="mation">
                <br />
                <div style={{
                    height: '25px', width: '75%', borderLeft: '8px solid #409eff', paddingLeft: '25px',
                    margin: '0 auto', color: '#409eff', fontWeight: 'bolder'
                }}>基本信息</div>
                <br />
                <Form
                    ref={formRef}
                    name="basic"
                    labelCol={{ span: 8 }}
                    wrapperCol={{ span: 16 }}
                    style={{ maxWidth: 600 }}
                    initialValues={{ remember: true }}
                    onFinish={(value) => {
                        onFinish(value)
                    }}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
                >
                    <Form.Item
                        label="医院名称"
                        name="username"
                        initialValue="河北大学第一附属医院"  // 默认值设置为河北大学第一附属医院
                        rules={[{ required: true, message: 'Please input your hospital name!' }]}
                    >
                        <Input disabled />
                    </Form.Item>

                    <Form.Item label="医院分类" name="classify">
                        <Select>
                            <Select.Option value="中医医院">中医医院</Select.Option>
                            <Select.Option value="康复医院">康复医院</Select.Option>
                            <Select.Option value="综合医院">综合医院</Select.Option>
                        </Select>
                    </Form.Item>

                    <Form.Item label="医院性质" name="quality">
                        <Select>
                            <Select.Option value="公立医院">公立医院</Select.Option>
                            <Select.Option value="私立医院">私立医院</Select.Option>
                        </Select>
                    </Form.Item>

                    <Form.Item label="是否支持医保" name="care">
                        <Select>
                            <Select.Option value="是">是</Select.Option>
                            <Select.Option value="否">否</Select.Option>
                        </Select>
                    </Form.Item>

                    <Form.Item label="医院等级" name="grade">
                        <Select>
                            <Select.Option value="三甲医院">三甲医院</Select.Option>
                            <Select.Option value="二甲医院">二甲医院</Select.Option>
                            <Select.Option value="一甲医院">一甲医院</Select.Option>
                        </Select>
                    </Form.Item>

                    <div style={{ display: 'flex', paddingLeft: '130px' }}>
                        <span style={{ color: '#f56e70', fontSize: '20px' }}>*</span>所在地区:&nbsp;
                        <Form.Item name="regiona" style={{ width: 130 }} rules={[{ required: true, message: 'Please input your region!' }]}>
                            <Input />
                        </Form.Item>

                        <Form.Item name="regionb" style={{ width: 130 }} rules={[{ required: true, message: 'Please input your region!' }]}>
                            <Input />
                        </Form.Item>

                        <Form.Item name="regionc" style={{ width: 130 }} rules={[{ required: true, message: 'Please input your region!' }]}>
                            <Input />
                        </Form.Item>
                    </div>

                    <Form.Item label="详细地址" name="address">
                        <Input />
                    </Form.Item>

                    <Form.Item label="乘车路线" name="route">
                        <Input.TextArea />
                    </Form.Item>

                    <Form.Item label="联系电话" name="phone">
                        <Input />
                    </Form.Item>

                    <Form.Item label="官网" name="website">
                        <Input />
                    </Form.Item>

                    <Form.Item label="医院简介" name="introduction">
                        <Input.TextArea />
                    </Form.Item>

                    <div style={{display: 'flex', paddingLeft: '230px' }}>
                        <Form.Item label={null}>
                            <Button htmlType="button" onClick={qing} style={{width:'90px'}}>
                                重置
                            </Button>
                        </Form.Item>
                        <Form.Item label={null} style={{ width:'250px',paddingRight: '130px' }}>
                            <Button type="primary" htmlType="submit">
                                提交审核
                            </Button>
                        </Form.Item>
                    </div>
                </Form>
            </div>
        </div>
    );
}
